<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>图书管理系统</title>

  <style>
      .demo-carousel {
          height: 200px;
          line-height: 200px;
          text-align: center;
      }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <jsp:include page="../../WEB-INF/common/header.jsp" flush="true"/>
  <div style="padding: 20px;"></div>
  <!-- 搜索条件表单 -->
  <div class="demoTable layui-form">
    <div class="layui-inline">
      <input class="layui-input" name="readerId" id="readerId" autocomplete="off" placeholder="请输入读者ID">
    </div>
    <div class="layui-inline">
      <input class="layui-input" name="name" id="name" autocomplete="off" placeholder="请输入姓名">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    <a style="margin-left: 70px" class="layui-btn layui-btn-normal" onclick="addReader();">添加读者</a>
  </div>
</div>

<div style="padding: 15px;"></div>
<table class="layui-hide" id="demo" lay-filter="test"></table>

<div class="layui-tab-item layui-show">
  <div id="pageDemo"></div>
</div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>


<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">

	layui.use(['layer', 'table', 'form', 'jquery', 'element'], function () {
		let layer = layui.layer;
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		layui.element.init();

		table.render({
			elem: '#demo',
			height: 550,
			url: '${pageContext.request.contextPath}/reader/readerPage',
			title: '读者表',
			page: true,
			limit: 5,
			limits: [5, 10, 15, 20],
			cols: [
				// 表头实例
				[
					{type: 'checkbox', fixed: 'left'}
					, {field: 'readerId', title: '读者ID', width: 150, sort: true}
					, {field: 'name', title: '姓名', width: 200}
					, {field: 'sex', title: '性别', width: 200, sort: true, templet: function (d){if (d.sex === 1){return "男"}else if (d.sex === 0){return "女"}else {return "保密"}}}
					, {field: 'birthday', title: '出生年月', width: 200, sort: true}
					, {field: 'address', title: '地址', width: 150, sort: true}
					, {field: 'telephone', title: '联系电话', width: 120, sort: true}
					, {field: 'cardState', title: '读者可借书籍', width: 120, sort: true}
					, {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
				]
			],
      id: 'readerReload'
		})

    // 重载
    let active = {
			reload: function (){
				let readerId = $('#readerId');
				let name = $('#name');
				table.reload('readerReload', {
          method: 'POST',
          page: {
          	curr: 1
          },
          where: {
            readerId: readerId.val(),
            name: name.val()
          }
        })
      }
    }

    // 监听条件搜索form
    $('.demoTable .layui-btn').on('click', function (){
    	let type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
    })

    // 监听table中的操作事件
    table.on('tool(test)', function (obj){
    	// 获取数据
      let data = obj.data;
      // 获取事件
      let event = obj.event;
      // 针对处理
      if (event === 'detail'){
        // 查看读者详情
        layer.open({
          type: 2,
          title: '查看读者信息',
	        skin: 'layui-layer-demo', // 加上边框
	        area: ['800px', '600px'],
	        method: 'POST',
	        content: '${pageContext.request.contextPath}/reader/readerQueryById?readerId=' + data.readerId
        })
      } else if (event === 'edit'){
      	// 变更读者信息
        layer.open({
          type: 2,
          title: '变更读者信息',
	        skin: 'layui-layer-demo', // 加上边框
	        area: ['800px', '600px'],
	        method: 'POST',
          content: '${pageContext.request.contextPath}/reader/toEdit?readerId=' + data.readerId
        })
      } else if (event === 'del'){
        // 删除读者信息
        layer.confirm("确认删除吗？", function (index){
        	$.ajax({
            url: '${pageContext.request.contextPath}/reader/delReader?id=' + data.id,
            method: 'POST',
            dataType: 'json',
            success: function (res){
            	if (res.success){
		            layer.alert(res.message, function (){
			            window.location.reload();
			            layer.close(index)
		            })
              } else {
            		layer.msg(res.message);
              }
            }
          })
        })
      }

    })

	})

  function addReader(){
		layer.open({
			type: 2,
			title: '新增读者登录用户',
			skin: 'layui-layer-demo', // 加上边框
			area: ['800px', '600px'],
			method: 'POST',
			content: '${pageContext.request.contextPath}/reader/toAddReader'
    })
  }

</script>
</body>
</html>
